<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    	// 给dom添加ind...
    	// 节点数组没有。。。
    	// nodelist 转为 array Array.prototype.slice.call(nodelist)
    	// parseInt parseFloat..
    	// 自动关联传入参数和arguements
    	// 取非行间样式。。。行间样式直接style获取。
    	// currentStyle .. IE
    	// getComputedStyle 
    	// 复合样式 单一样式
    	// 无缝滚动，定时器的应用
    	//offsetparent 
    	//setAttribute getAttribute remove..[].
    	//querySelectorAll.querySelector className
        window.onload=function(){

        	// alert(12+4+'')  16
        	// alert(''+12+4+'')  124
			var con=document.getElementsByTagName('input')
			var ct=document.getElementsByTagName('div')
			// ct.forEach((item)=>{
			// 	console.log(item);
			// })
			alert(getComputedStyle(ct[2],false).width)
			var arr=[1,3,4,5,7];
			arr.forEach((ind)=>{
				console.log(ind);
			})
			for(var item in ct){
				console.log(item)
			}
			console.log(ct[0].innerHTML)
			for(var i=0;i<con.length;i++){
				con[i].index=i;
				con[i].onclick=function(){
			for(var j=0;j<con.length;j++){
				con[j].className='';
				ct[j+1].style.display='none'
					this.className='active';
				}
					console.log(this.index)
					ct[this.index+1].style.display='block'
			}
			}

		}
	</script>
    <style>
        .demo div{
			width:200px;
			height: 200px;
			border:1px solid yellow;
			display: none
		}
		.active{
			background: yellow
		}
	</style>
</head>

<body>
    <div class="demo">
        <input type="button" value="1" class="active">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
        <div style="display:block">11</div>
        <div>222</div>
        <div>333</div>
        <div>4444</div>
    </div>
</body>

</html>